<template>
  <div>
    <h1>这里打算写地图</h1>
    <div id="main" style="width: 900px;height:800px;border:1px solid red"></div>
  </div>
</template>

<script>
import echarts from "echarts";
const chinaJson = require("../assets/GeoMapData_CN-master/china.json");
export default {
  created() {
    
  },

  mounted() {
      this.init();
  },

  methods: {
    init() {
      echarts.registerMap("china", chinaJson);
      // 获取经纬度数据
      const seriesList = [
        {
          image: '../assets/image/homeIcon/zaixian.png',
          data: [
            { value: [106.9, 27.7] },
            { value: [105.29, 27.32] },
            { value: [106.04, 27.03] },
            { value: [104.82, 26.58] }
          ]
        },
        {
          image: '../assets/images/homeIcon/shangxian.png',
          data: [
            {
              value: [107.43, 28.56]
            }
          ]
        },
        {
          image: '../assets/images/homeIcon/lixian.png',
          data: [
            {
              value: [107.5, 27.76]
            }
          ]
        }
      ];
      // 自定义图标
      const series = seriesList.map(v => {
        return {
          type: "custom", //配置显示方式为用户自定义
          coordinateSystem: "geo",
          renderItem(params, api) {
            //具体实现自定义图标的方法
            return {
              type: "image",
              style: {
                image: v.image,
                x: api.coord([
                  v.data[params.dataIndex].value[0],
                  v.data[params.dataIndex].value[1]
                ])[0],
                y: api.coord([
                  v.data[params.dataIndex].value[0],
                  v.data[params.dataIndex].value[1]
                ])[1],
                width: "29",
                height: "35"
              }
            };
          },
          data: v.data
        };
      });
      // options
      const distributionOptions = {
        tooltip: {
          show: true,
          trigger: "item",
          triggerOn: "click",
          formatter: "名称:{b}<br />坐标:{c}"
        },
        series,
        geo: {
          //引入贵州省的地图
          map: "china",
          label: {
            emphasis: {
              show: true
            }
          },
          layoutCenter: ["50%", "50%"], //设置后left/right/top/bottom等属性无效
          layoutSize: "90%",
          roam: true, //开启鼠标缩放和漫
          zoom: 2,
          label: {
            normal: {
              //静态的时候展示样式
              show: true, //是否显示地图省份得名称
              textStyle: {
                color: "#fff",
                // fontSize: 10,
                fontFamily: "Arial"
              }
            },
            emphasis: {
              //动态展示的样式
              color: "#fff"
            }
          },
          itemStyle: {
            normal: {
              borderColor: "#07919e",
              areaColor: "#1c2f59",
              textStyle: {
                color: "#fff"
              },
              shadowBlur: 10,
              shadowOffsetX: 10
            },
            emphasis: {
              areaColor: "#1c2f59",
              color: "#fff"
            }
          }
        }
      };
      var myChart = echarts.init(document.getElementById("main"));
      myChart.setOption(distributionOptions);
      window.onresize = function() {
        myChart.resize();
      };
    }
  }
};
</script>

<style scoped>
</style>